<template>
  <el-container class="layout-container-demo" style="height: 100vh;">
    <el-aside width="200px">
      <el-scrollbar>
        <div class="logo"><img src="../images/logo.png" alt="logo"></div>
        <h2>外卖管理系统</h2>
        <el-menu router="true" default-active="0" class="el-menu-vertical-demo" text-color="#fff" @open="handleOpen"
          @close="handleClose">
          <el-menu-item index="/home">
            <el-icon>
              <icon-menu />
            </el-icon>
            <span>后台首页</span>
          </el-menu-item>
          <el-menu-item index="/home/order/manage">
            <el-icon>
              <location />
            </el-icon>
            <span> 订单管理</span>
          </el-menu-item>
          <el-sub-menu index="商品管理">
            <template #title>
              <el-icon>
                <document />
              </el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item index="/home/goods/List">商品列表</el-menu-item>
            <el-menu-item index="/home/goods/add">商品添加</el-menu-item>
            <el-menu-item index="/home/goods/Type">商品分类</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/home/shop/manage"> <el-icon>
              <document />
            </el-icon> <span>店铺管理</span>
          </el-menu-item>
          <el-sub-menu index="账号管理">
            <template #title>
              <el-icon>
                <setting />
              </el-icon>
              <span>账号管理</span>
            </template>
            <el-menu-item index="/home/account/list">账号列表</el-menu-item>
            <el-menu-item index="/home/account/add">账号添加</el-menu-item>
            <el-menu-item index="/home/account/Password">修改密码</el-menu-item>
            <el-menu-item index="/home/account/Personal">个人中心</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="销售统计">
            <template #title>
              <el-icon>
                <document />
              </el-icon>
              <span>销售统计</span>
            </template>
            <el-menu-item index="/home/statistics/Product">商品统计</el-menu-item>
            <el-menu-item index="/home/statistics/Order">订单统计</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <div class="right">
      <div class="right_top">
        <div class="right_top_left">
          <!-- 面包屑 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">后台首页</el-breadcrumb-item>
            <el-breadcrumb-item v-if="currentRouteName === 'order_manage'"
              :to="{ path: '/home/order/manage' }">订单管理</el-breadcrumb-item>
            <el-breadcrumb-item v-if="currentRouteName === 'goods_list'"
              :to="{ path: '/home/goods/List' }">商品列表</el-breadcrumb-item>
            <!-- 根据需要添加更多的面包屑项 -->
          </el-breadcrumb>
        </div>
        <div class="right_top_right">
          <div>欢迎您,{{ MyAccount }}</div>
          <!-- <div><img :src="MyImage" alt=""></div> -->
          <!-- 下拉列表 -->
          <el-dropdown placement="bottom-start">
            <img :src="MyImage" alt="" class="img_avater">
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleOutLogin">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="right_down">
        <router-view></router-view>
      </div>
    </div>
  </el-container>
</template>

<script lang="ts" setup>

import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { ArrowRight } from '@element-plus/icons-vue'
import { Menu as IconMenu, Location, Document, Setting } from '@element-plus/icons-vue'

const item = {
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
const tableData = ref(Array.from({ length: 20 }).fill(item))

// 定义 handleOpen 方法
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

// 定义 handleClose 方法
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const route = useRoute();
const currentRouteName = ref(route.name);

// 监听路由变化，更新面包屑
watch(route, (to) => {
  currentRouteName.value = to.name;
});


const avatar = localStorage.getItem('account');
const avatarUrl = ref(localStorage.getItem('imgUrl') || '默认头像地址');

const router = useRouter();
const MyAccount = ref(sessionStorage.getItem('MyAccount'));
const MyImage = ref(sessionStorage.getItem('MyImage'));
//console.log(MyAccount.value,MyImage.value);//成功拿到


//退出登录并清除本地存储的token
function handleOutLogin() {
  localStorage.removeItem('t_k');
  router.replace('/');
}
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
  background-color: #1963ac;
}

.layout-container-demo .el-menu {
  border-right: none;
  background-color: #1963ac;
}

.layout-container-demo .el-main {
  padding: 0;

}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

.el-sub-menu .el-menu-item {
  background-color: #155093;
  /* 子菜单项的背景颜色 */
}

.el-sub-menu .el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.5);
  /* 子菜单项悬停的背景颜色 */
}

.el-sub-menu .el-menu {
  background-color: #155093;
  /* 子菜单的背景颜色 */
}

h2 {
  text-align: center;
}

.toolbar {
  width: 100%;
}

.paged-content-header {
  display: flex;
  align-content: center;
  width: 100%;
  height: 60px;
}

.breadcrumbs {
  margin-right: auto;
  align-content: center;
}

.logo {
  text-align: center;
  align-content: center;

  img {
    padding-top: 20px;
    width: 60px;
  }
}

/* ----------------------------- */
.right {
  width: calc(100vw - 200px);
  height: 100vh;
}

.right_top {
  width: calc(100vw - 200px);

  height: 60px;
  display: flex;
  background-color: #fdfdfd;
  justify-content: space-between;

  .right_top_right {
    display: flex;
    margin-right: 10px;


    div:nth-child(1) {
      align-content: end;
      font-size: 12px;

    }

    div:nth-child(2) {
      width: 3vw;
      height: 5vh;
      align-content: center;
      border-radius: 50px;
      margin-right: 20px;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        margin-top: 5px;
      }
    }
  }

  .right_top_left {
    align-content: center;
    margin-left: 10px;
    /* 
    span {
      margin-right: 10px;
    } */
  }
}

.right_down {
  height: calc(100vh - 60px);
  overflow: auto;
}



/* ------------------------- */
.right_top_left {
  align-content: center;
  margin-left: 10px;
}

/* 面包屑样式 */
.el-breadcrumb {
  display: inline-block;
}
</style>
